<template>
  <el-row type="flex" justify="space-between">
    <!-- <el-col :span="20">
      <el-radio-group v-model="activeName" @change="handleChange">
        <el-radio-button
          v-for="(item, index) in years"
          :key="index"
          :label="item"
          >{{ item }}</el-radio-button
        >
      </el-radio-group>
    </el-col> -->
    <!-- <el-col :span="2">
      <el-button
        v-auth="`funds-statistics-total-export`"
        class="right-btn"
        type="primary"
        @click="handleExport"
        >导出</el-button
      >
    </el-col> -->
  </el-row>

  <br />
  <el-skeleton :loading="loading" animated>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ color: '#606266' }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column
        prop="happenDept"
        label="经费类别"
        width="150"
        align="center"
        fixed="left"
      />
      <el-table-column label="年度经费统计(万元)" align="center">
        <el-table-column
          prop="budgetSumAmount"
          label="预算总额"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="inputTotal"
          label="已投入总额"
          min-width="80"
          align="center"
        />
      </el-table-column>
      <el-table-column label="各月份经费支出统计(万元)" align="center">
        <el-table-column
          prop="month1"
          label="1月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month2"
          label="2月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month3"
          label="3月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month4"
          label="4月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month5"
          label="5月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month6"
          label="6月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month7"
          label="7月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month8"
          label="8月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month9"
          label="9月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month10"
          label="10月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month11"
          label="11月"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="month12"
          label="12月"
          min-width="80"
          align="center"
        />
      </el-table-column>
    </el-table>
  </el-skeleton>
  <el-dialog
    title="科研经费合计导出"
    v-model="dialogFormVisible"
    destroy-on-close
    width="45vw"
  >
    <SummaryExport
      :years="years"
      @emitSubmit="onEmitSubmit"
      v-if="dialogFormVisible"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getMonthStatistics, getFeeYears } from "/@/api/funds";
import SummaryExport from "./SummaryExport.vue";

const loading = ref(false);

const activeName = ref(new Date().getFullYear() + "");

const tableData = ref([]);
const years = ref([]);

const dialogFormVisible = ref(false);

const initGetData = async val => {
  // 真实请求待添加
  loading.value = true;
  try {
    const { code, data } = await getMonthStatistics(val);
    if (code === 200 && data) {
      let arr = [];
      let obj = null;
      data.forEach(el => {
        if (el.happenDept !== "公司合计") {
          arr.push(el);
        } else {
          obj = el;
        }
      });
      arr.push(obj);
      tableData.value = arr;
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};

const getYearList = async () => {
  const { code, data } = await getFeeYears();
  if (code === 200) {
    years.value = data;
  }
};
// const handleChange = () => {
//   initGetData(activeName.value);
// };

// const handleExport = () => {
//   dialogFormVisible.value = true;
// };

const onEmitSubmit = () => {
  dialogFormVisible.value = false;
};

defineExpose({
  initGetData
});

getYearList();

initGetData(activeName.value);
</script>

<style lang="scss" scoped>
.right-btn {
  float: right;
}
</style>
